<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>欢迎使用 IMOOC Cake 后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/assets/css/theme.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/admin-forms.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>

<body class="admin-validation-page" data-spy="scroll" data-target="#nav-spy" data-offset="200">
<div id="main">
    <header class="navbar navbar-fixed-top navbar-shadow">
        <div class="navbar-branding">
            <a class="navbar-brand" href="../index.html">
                <H3>Love Cake 后台管理系统</H3>
            </a>
            <span id="toggle_sidemenu_l" class="ad ad-lines"></span>
        </div>
    </header>
    <aside id="sidebar_left" class="nano nano-light affix">
        <div class="sidebar-left-content nano-content">
            <header class="sidebar-header">
                <div class="sidebar-widget author-widget">
                    <div class="media">
                        <a class="media-left" href="#">
                            <img src="/assets/images/head.jpg" class="img-responsive">
                        </a>
                        <div class="media-body">
                            <div class="media-author">管理员</div>
                            <div class="media-links">
                                <a href="/view/login">退出</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sidebar-widget search-widget hidden">
                    <div class="input-group">
                        <span class="input-group-addon">
                        <i class="fa fa-search"></i>
                        </span>
                        <input type="text" id="sidebar-search" class="form-control" placeholder="Search...">
                    </div>
                </div>
            </header>
            <ul class="nav sidebar-menu">
                <li class="sidebar-label pt20">商品管理</li>
                <li class="active">
                    <a href="/view/cake_list">
                        <span class="glyphicon glyphicon-book"></span>
                        <span class="sidebar-title">商品列表</span>
                    </a>
                </li>
                <li>
                    <a href="/view/cake_add">
                        <span class="glyphicon glyphicon-home"></span>
                        <span class="sidebar-title">商品上架</span>
                    </a>
                </li>
                <li class="sidebar-label pt20">分类管理</li>
                <li class="active">
                    <a href="/view/catalog_list" oncick="getPageData()">
                        <span class="glyphicon glyphicon-book"></span>
                        <span class="sidebar-title">分类列表</span>
                    </a>
                </li>
                <li>
                    <a href="/view/catalog_add">
                        <span class="glyphicon glyphicon-home"></span>
                        <span class="sidebar-title">添加分类</span>
                    </a>
                </li>
            </ul>
            <div class="sidebar-toggle-mini">
                <a href="/view/login">
                    <span class="fa fa-sign-out"></span>
                </a>
            </div>
        </div>
    </aside>
    <section id="content_wrapper">
        <section id="content" class="table-layout animated fadeIn">
            <div class="tray tray-center">
                <div class="content-header">
                    <h2> 添加分类</h2>
                    <p class="lead"></p>
                </div>
                <div class="admin-form theme-primary mw1000 center-block" style="padding-bottom: 175px;">
                    <div class="panel heading-border">
                        <form id="admin-form">
                            <div class="panel-body bg-light">
                                <div class="section row">
                                    <div>
                                        <div class="col-md-3"><b>分类编号</b></div>
                                        <div class="col-md-5"><b>分类名称</b></div>
                                        <div class="col-md-3"><b>所属父类</b></div>
                                        <div class="col-md-1" style="text-align:right;"><b>删除</b></div>
                                    </div>
                                </div>
                                <div class="section row" id="batch_items">
                                    <div>
                                        <div class="col-md-3">
                                            <label for="title" class="field prepend-icon">
                                                <input type="text" name="title" id="title" class="gui-input money" placeholder="名称..." required>
                                                <label for="title" class="field-icon">
                                                    <i class="fa fa-stack"></i>
                                                </label>
                                            </label>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="field select">
                                                <select id="language" name="pid">

<%--                                                    <option value="10000">蛋糕主类</option>--%>


                                                </select>
                                                <i class="arrow double"></i>
                                            </label>
                                        </div>
                                        <div class="col-md-5">
                                            <label for="info" class="field prepend-icon">
                                                <input type="text" name="info" id="info" class="gui-input" placeholder="描述...">
                                                <label for="info" class="field-icon">
                                                    <i class="fa fa-info"></i>
                                                </label>
                                            </label>
                                        </div>
                                        <div class="col-md-1" style="text-align:right;">
                                            <button type="button" class="button remove_item_button"> X </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-footer text-right">
                                    <button type="button" class="button" id="add_item_button"> 添加 </button>
                                    <button type="submit" class="button" onclick="saveCatalog()"> 保存 </button>
                                    <button type="button" class="button" onclick="javascript:window.location.href='catalog_list.html';"> 返回 </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </section>


</div>
<style>
    /* demo page styles */
    body { min-height: 2300px; }

    .content-header b,
    .admin-form .panel.heading-border:before,
    .admin-form .panel .heading-border:before {
        transition: all 0.7s ease;
    }
    /* responsive demo styles */
    @media (max-width: 800px) {
        .admin-form .panel-body { padding: 18px 12px; }
    }
</style>

<style>
    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year {
        width: 48%;
        margin-top: 0;
        margin-bottom: 0;

        line-height: 25px;
        text-indent: 3px;

        color: #888;
        border-color: #DDD;
        background-color: #FDFDFD;

        -webkit-appearance: none; /*Optionally disable dropdown arrow*/
    }
</style>

<!-- jQuery -->
<script src="/assets/js/jquery-3.3.1.min.js"></script>
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/jquery-ui.min.js"></script>
<!-- Theme Javascript -->
<script src="/assets/js/utility.js"></script>
<script src="/assets/js/demo/demo.js"></script>
<script src="/assets/js/main.js"></script>
<script src="/assets/js/pages.js"></script>
<!-- END: PAGE SCRIPTS -->
</body>
<script>
    $("#add_item_button").click(function(){
        $("#batch_items").children("div").last().after($("#batch_items").children("div").first().clone());
        $("#batch_items").find("button.remove_item_button").attr("disabled",false);
        $("#batch_items").children("div").last().find("input").eq(0).attr("value","");
        $("#batch_items").children("div").last().find("button.remove_item_button").click(
            function(){itemRemove(this);}
        );
    });
    function itemRemove(ele){
        $(ele).parent().parent().remove();
        if($("#batch_items").children("div").size()==1){
            $("#batch_items").children("div").find("button.remove_item_button").attr("disabled",true);
        }
    }
</script>
<script>
    $.ajax({
        async : true,
        url : "/selectAll",
        type : "post",
        data : {},
        dataType : "json",
        success : function(data) {
            var arr = data.result;
            console.log(arr);
            $("#language").empty();
            for (var i = 0; i < arr.length; i++) {
                if(arr[i].levelId == "1") {
                    $("#language").append('<option  name="types" value="' + arr[i].title + '">&nbsp;&nbsp;&nbsp;&nbsp;' + arr[i].title +'</option>');
                } else if(arr[i].levelId == "2") {
                    $("#language").append('<option name="types" value="' + arr[i].title + '">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + arr[i].title +'</option>');
                }
            }
        }
    });

    function saveCatalog() {
        var arr = new Array();
        var count = 0;
        // 循环遍历 计算出一共有几个数据 然后循环添加成obj然后丢到数组里面
        $("[name=title]").each(function() {
            count++;
        });
        // console.log(count);
        for(var i=0; i<count; i++) {
            var catalogInfo = new Object();
            $("[name=title]").each(function(index, ele) {
                if(index == i) {
                    catalogInfo.title = $(this).val();
                }
            });
            $("[name=pid]").each(function(index, ele) {
                if(index == i) {
                    catalogInfo.type = $(this).find("option:selected").val();
                }
            });
            $("[name=info]").each(function(index, ele) {
                if(index == i) {
                    catalogInfo.info = $(this).val();
                }
            });
            arr.push(catalogInfo);
        }
        // console.log(arr);
        var str = JSON.stringify(arr);
        var obj = {
            "param":str
        }
        $.ajax({
            url:"/addCakeCatalog",
            async : true,
            type:"post",
            data:obj,
            dataType:"json",
            success:function(data){
                var flag = data.flag;
                if(flag == 1) {
                    alert("添加成功");
                    window.location.href = data.result;
                }
            }
        });
    }
</script>

</html>
